<template>
    <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <div style="display:flex">
                <span>
                    <el-form-item label="手机号" prop="phone">
                        <el-input :disabled="isEdit" v-model="formData.phone" placeholder="请输入手机号"
                            maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="member_xm">
                        <el-input v-model="formData.member_xm" placeholder="请输入姓名" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="member_xb">
                        <el-select v-model="formData.member_xb" placeholder="请选择性别">
                            <el-option v-for="item in sexData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="id_num">
                        <el-input v-model="formData.id_num" placeholder="请输入身份证号" maxlength="18"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="住户组织" prop="section_sn">
                        <uxInputTree v-model="formData.section_sn" :selectParams="selectParams" :treeData="departmentData"
                            :treeParams="treeParams" />
                    </el-form-item>
                    
                </span>
                <span style="margin-left:20px">
                    <el-form-item label="门禁管理员" prop="door_manager">
                        <el-select v-model="formData.door_manager" placeholder="请选择是否门禁管员">
                            <el-option v-for="item in yesnoData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二维码通行" prop="door_qrcode">
                        <el-select v-model="formData.door_qrcode" placeholder="请选择是否开通二维码">
                            <el-option v-for="item in funcData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通行卡号" prop="door_card">
                        <el-input v-model="formData.door_card" placeholder="请输入通行卡号" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="通行密码" prop="door_pwd">
                        <el-input v-model="formData.door_pwd" placeholder="请输入通行密码" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="住户人脸" prop="face_thumb">
                        <div class="box-row  tooltip-el" style="align-items:flex-end">
                            <uxUpload v-model="formData.face_thumb" dir="face/holder" :isPic="true"></uxUpload>
                            <el-tooltip>
                                <div slot="content" style="color:red">
                                    1:人脸大小300像素 * 500像素范围左右<br/><br/>
                                    2:图片要求清楚，有且只有一张正面照人脸图片
                                </div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                       
                    </el-form-item>
                </span>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinNext } from '@/mixin/Next';
import uxUpload from "@/components/input/upload/index.vue";
import uxInputTree from "@/components/input/tree";
@Component({
    mixins: [mixinDialogForm, mixinNext],
    components: { uxInputTree, uxUpload }
})
export default class parkTenantEdit extends Vue {
    // 新增
    @Action("parkTenant/add") itemAdd: any;
    // 编辑
    @Action("parkTenant/edit") itemEdit: any;

    @Action("parkOrg/tree") getDepartment: any;
    @Getter("parkOrg/tree") departmentData: any;

    @State((state) => state.sharing.sex) sexData: any;
    @State((state) => state.sharing.func) funcData: any;
    @State((state) => state.sharing.yesno) yesnoData: any;
    created() {
        const me = this as any;
        me.getDepartment();
    }

    editInit(data: any) {
        const me = this as any;
        data.member_xb = data.member_xb.toString();
        data.door_qrcode = data.door_qrcode.toString();
        me.formData = Object.assign({}, me.formData, data);
    }


    // 表单数据
    formData: any = {
        member_xm: "",
        phone: "",
        member_xb: "1",
        remark: '',
        door_card: "",
        door_pwd: "",
        face_thumb: "",
        door_qrcode: "2",
        id_num: '',
        door_manager: '2',
        checked: '',
        section_sn: ''
    };

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        member_xm: [
            {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
            }
        ],
        member_xb: [
            {
                required: true,
                message: "请选择性别"
            }
        ],
        phone: [
            {
                required: true,
                message: "请输入手机号"
            }
        ]
    };
    // 标题
    get title() {
        const title = (this as any).isEdit ? "编辑" : "新增";
        return `${title}住户`;
    }
    selectParams: object = {
        clearable: true,
        placeholder: "请选择所属组织"
    };
    treeParams: any = {
        // clickParent: true,
        props: {
            children: "children",
            label: "section_name",
            value: "section_sn"
        }
    };
}
</script>
